<template>
	<view>
		<u-navbar :background="navBackground" :border-bottom="false">
			<view @click="sessionMenu" class="menu-wrap" slot="right"></view>
		</u-navbar>
		<div class="page">
			<div class="container">
				<div class="header">
					<image class="layer" src="/static/img/img_0.png" mode="widthFix" />
				</div>
				<div class="body">
					<div class="group">
						<div class="view">
							<view>
								<image style="width: 30px; height: 30px;" :src="redpacketDetail.redpacket.sender_avatar || '/static/default.png'"></image>
							</view>
							<span class="title">{{ redpacketDetail.redpacket.sender_nickname }}的红包</span>
						</div>
						<span class="book">{{ redpacketDetail.redpacket.title || '恭喜发财，大吉大利' }}</span>
					</div>
					<div class="group-1">
						<!-- 修改金额显示逻辑 -->
						<template v-if="redpacketDetail.user_claim && redpacketDetail.user_claim.amount > 0">
							<div class="view-1">
								<span class="count">{{ redpacketDetail.user_claim.amount }}</span>
								<span class="title-1">元</span>
							</div>
							<span class="title-2">已存入余额，可用于发红包</span>
						</template>
						<template v-else>
							<span class="empty-tip">手慢了，红包派完了</span>
						</template>
					</div>
				</div>
			</div>
			<div class="container-1">
				<span class="caption">已领取{{ redpacketDetail.claims.length }}/{{ redpacketDetail.redpacket.count_total }}个，共{{ redpacketDetail.redpacket.amount_total }}元</span>
				<div class="main" v-for="(claim, index) in redpacketDetail.claims" :key="index">
					<view>
						<image style="width: 50px; height: 50px;" :src="claim.avatar || '/static/default.png'"></image>
					</view>
					<div class="group-2">
						<div class="view-2">
							<span class="caption-1">{{ claim.nickname }}</span>
							<span class="title-3">{{ claim.amount }}元</span>
						</div>
						<span class="caption-2">{{ claim.claim_time }}</span>
					</div>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	import Config from "@/common/config.js"; // 本地配置数据
	export default {
		data() {
			return {
				navBackground: { backgroundColor: '#f55545' },
				redpacketDetail: {
					redpacket: {},
					user_claim: {},
					claims: []
				},
				redPackedId: null,
				chatId: null
			}
		},
		onLoad(options) {
			this.redPackedId = options.redPackedId || uni.getStorageSync('redPackedId') || '';
			this.chatId = options.id || uni.getStorageSync('chatId') || '';
			this.getRedpacketDetail();
		},
		methods: {
			sessionMenu() {
				// 兼容跳转，使用缓存或当前 chatId
				let chatId = this.chatId;
				if (!chatId) {
					const routeParams = getCurrentPages().pop()?.options || {};
					chatId = routeParams.id || '';
				}
				uni.navigateTo({
					url: '/pages/session-info/chat-setting?id=' + chatId
				});
			},
			getRedpacketDetail() {
				const userinfo = uni.getStorageSync('userinfo');
				const userToken = userinfo.token;
				const userId = userinfo.user_id;
				console.log("this.redPackedId:", this.redPackedId);
				this.$u.post(`https://${Config.baseUrl}/api/Redpacket/getRedpacketDetails?im_tourists_token=${userToken}`, {
					user_id: userId,
					redpacket_id: this.redPackedId
				}).then(res => {
					if (res.status === 'success') {
						this.redpacketDetail = {
							redpacket: res.data.redpacket,
							user_claim: res.data.user_claim,
							claims: res.data.claims
						};
					} else {
						this.$refs.uToast?.show({
							title: res.message || '获取详情失败',
							type: 'error'
						});
					}
				}).catch(err => {
					console.error("请求失败", err);
					this.$refs.uToast?.show({
						title: '网络异常',
						type: 'error'
					});
				});
			}
		}
	}
</script>

<style>
	.page .caption-1 {
		font-size: 32rpx;
		color: #000000;
		line-height: 32rpx;
		letter-spacing: 3.2rpx;
		margin-left: 0;
		white-space: nowrap;
	}
	.page {
		background-color: rgba(241, 241, 241, 1);
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		width: 749rpx;
		height: 1334rpx;
	}

	.page .container {
		background-color: rgba(255, 255, 255, 1);
		padding-bottom: 67rpx;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-self: center;
	}

	.page .header {

		align-self: center;
		position: relative;
		width: 749rpx;
		height: 179rpx;
	}

	.page .layer {
		width: 749rpx;
		height: 179rpx;
		position: absolute;
		left: 50%;
		top: 0rpx;
		transform: translateX(-50%);
	}

	.page .icon-left-wrapper {
		position: absolute;
		left: 23rpx;
		top: 32rpx;
		width: 18rpx;
		height: 33rpx;
	}

	.page .icon-left {
		width: 18rpx;
		height: 33rpx;
		position: absolute;
		left: 50%;
		top: 0rpx;
		transform: translateX(-50%);
	}

	.page .body {
		display: flex;
		flex-direction: column;
		margin-top: 47rpx;
		justify-content: flex-start;
		align-self: center;
		width: 749rpx;
		padding: 0 12rpx;
	}

	.page .group {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-self: center;
		width: 339rpx;
	}

	.page .view {
		display: flex;
		justify-content: center;
		align-self: center;
		width: 263rpx;
	}

	.page .overlayer {
		background-color: rgba(247, 213, 121, 1);
		margin-left: 3rpx;
		align-self: center;
		width: 46rpx;
		height: 46rpx;
		border-radius: 10rpx;
	}

	.page .title {
		font-size: 37rpx;
		color: #000000;
		line-height: 37rpx;
		letter-spacing: 3.7rpx;
		lines: 1;
		align-self: center;
		margin-top: 2rpx;
		white-space: nowrap;
	}

	.page .book {
		font-size: 26rpx;
		color: #b8b8b8;
		line-height: 26rpx;
		letter-spacing: 2.6rpx;
		lines: 1;
		align-self: flex-start;
		white-space: nowrap;
		margin: 25rpx 0 0 47rpx;
	}

	.page .group-1 {
		display: flex;
		flex-direction: column;
		margin-top: 77rpx;
		justify-content: flex-start;
		align-self: center;
		width: 339rpx;
	}

	.page .view-1 {
		display: flex;
		justify-content: center;
		align-self: center;
		width: 339rpx;
	}

	.page .count {
		font-size: 110rpx;
		color: #ccad76;
		line-height: 110rpx;
		letter-spacing: 11rpx;
		lines: 1;
		margin-left: 1rpx;
		align-self: flex-end;
		white-space: nowrap;
	}

	.page .title-1 {
		font-size: 26rpx;
		color: #ccad76;
		line-height: 26rpx;
		letter-spacing: 2.6rpx;
		lines: 1;
		margin-left: 18rpx;
		align-self: flex-end;
		white-space: nowrap;
	}

	.page .title-2 {
		font-size: 26rpx;
		color: #ccad76;
		line-height: 26rpx;
		letter-spacing: 2.6rpx;
		lines: 1;
		align-self: center;
		white-space: nowrap;
		margin: 35rpx 0 0 1rpx;
	}

	.page .container-1 {
		background-color: rgba(255, 255, 255, 1);
		display: flex;
		flex-direction: column;
		margin-top: 14rpx;
		justify-content: flex-start;
		align-self: center;
		width: 749rpx;
		padding: 38rpx 12rpx 505rpx;
	}

	.page .caption {
		font-size: 26rpx;
		color: #b8b8b8;
		line-height: 26rpx;
		letter-spacing: 2.6rpx;
		lines: 1;
		align-self: flex-start;
		margin-left: 22rpx;
		max-width: 681rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.page .main {
		display: flex;
		margin-top: 55rpx;
		justify-content: flex-start;
		align-self: center;
		width: 691rpx;
	}

	.page .mask {
		background-color: rgba(247, 213, 121, 1);
		align-self: center;
		width: 90rpx;
		height: 90rpx;
		border-radius: 10rpx;
	}

	.page .group-2 {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-self: center;
		height: 90rpx;
		width: 600rpx;
		padding: 8rpx 0 13rpx;
	}

	.page .view-2 {
		display: flex;
		justify-content: space-between;
		align-self: center;
		width: 600rpx;
	}

	.page .caption-1 {
		font-size: 32rpx;
		color: #000000;
		line-height: 32rpx;
		letter-spacing: 3.2rpx;
		lines: 1;
		margin-left: 26rpx;
		align-self: center;
		white-space: nowrap;
	}

	.page .title-3 {
		font-size: 32rpx;
		color: #000000;
		line-height: 32rpx;
		letter-spacing: 3.2rpx;
		lines: 1;
		align-self: center;
		margin-top: 2rpx;
		margin-left: 10px;
		white-space: nowrap;
	}

	.page .caption-2 {
		font-size: 26rpx;
		color: #b8b8b8;
		line-height: 26rpx;
		letter-spacing: 2.6rpx;
		lines: 1;
		align-self: flex-start;
		max-width: 550rpx;
		overflow: hidden;
		white-space: pre;
		text-overflow: ellipsis;
		margin: 18rpx 0 0 25rpx;
	}
	
	/* 新增空状态样式 */
		.empty-tip {
			font-size: 39rpx;
			color: #ffaa7f;
			line-height: 1.5;
			text-align: center;
			margin-top: 40rpx;
			display: block;
		}
	
		/* 调整原有金额样式 */
		.group-1 {
			min-height: 200rpx; /* 保持高度稳定 */
			display: flex;
			flex-direction: column;
			align-items: center;
		}
</style>